<template>
    <div class="caseNoticeNumber" @click="showCaseNotice" v-if="noticeNumberVisible && noticeNumber>0">
        <span class="notice">{{noticeNumber}}</span>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import { getCaseNoticeInfoByUsername,markCaseNoticeInfoAsRead }
        from '_p/afs-core-business/api/afs-case/approve-notice/caseNoticeInfo'
    export default {
        name: "CaseNotice",
        data() {
            return {
                noticeNumberVisible:false,
                noticeInfoList:[
                    {
                        id:"",
                        noticeType:"",
                        applyNo:"",
                        notice:"",
                        receivedBy:"",
                        isRead:"",
                        result:""
                    }
                ],
                noticeNumber:0
            }
        },
        computed:{
            ...mapGetters(['userInfo']),
        },
        methods:{
            refreshNotice(){
                setInterval(() =>{
                    this.getCaseNoticeInfo();
                },15000);
            },
            getCaseNoticeInfo(){
                getCaseNoticeInfoByUsername().then((res) => {
                    if(res.code === '0000'){
                        this.noticeInfoList=res.data.records;
                        this.noticeNumber=res.data.total;
                        if(this.noticeNumber > 0){
                            this.noticeNumberVisible=true;
                        }else{
                            this.noticeNumberVisible=false;
                        }
                    }
                });
            },
            showCaseNotice(){
                this.noticeNumberVisible=false;
                //主页显示通知
                this.noticeInfoList.forEach( item => {
                    if(item.isRead === "0"){
                        //主页消息通知
                        this.$Notice.info(
                            {
                                title:item.noticeType === 'JOB'?"系统消息":"审批消息",
                                desc:item.noticeType === 'JOB' ? item.notice:('申请编号：'+item.applyNo+'<br/>'+item.notice),
                                duration: 0,
                                onClose:this.updateJobCaseNotice(item)
                            }
                        )
                    }
                });
            },
            updateJobCaseNotice(notice){
                markCaseNoticeInfoAsRead(notice).then((res) => {
                    if (res.code === '0000') {
                        console.log("已标记为已读");
                    }
                });
            }
        },
        mounted() {
            this.getCaseNoticeInfo();
            this.$nextTick(function () {
                this.refreshNotice();
            })
        }
    }

</script>

<style scoped>
    ul,
    li {
        list-style: none;
    }
    .caseNoticeNumber{
        position: fixed;
        right: 0;
        top: 100px;
        z-index: 9999999;
        cursor:pointer;
        width: 25px;
        height: 25px;
        text-align: center;
        background-color: #FF0000;
        display: flex;
        border-radius:50%;
    }
    .notice{
        width: 100%;
        height: 100%;
        color: white;
        font-size: 14px;
        line-height:24px;
        text-align: center;
        font-weight: bold;
    }

</style>
